<template>
    <div>
        <!-- <h1>播放列表</h1> -->
        <!-- songlist 属性在Song.vue 被定义 -->
        <list-title>推荐音乐</list-title>
        <loading v-if="songList.length==0"></loading>
        <music-list :songlist="songList" @play="$emit('play',$event)"></music-list>
        <list-title>歌单评论</list-title>
        <comment :comment="comment"></comment>
    </div>
</template>
<script>
import MusicList from '@/components/MusicList.vue';
import Comment from '@/components/Comment.vue';
import ListTitle from '@/components/ListTitle.vue'

export default {
    props:{
        listid:[String,Number]  //从Song.vue开始传值，在index.js绑定 
    },
    data(){
        return {
            songList:[],  //歌曲数据 ,与Song.vue响应的数据不一样
            comment:[], //存储评论数据
            page:1,  //页数
        }
    },
    beforeRouteEnter(to,from,next){
        // console.log("beforeRouteEnter");  //验证缓存
        next(vm=>{
            vm.axios.get(`/playlist/detail?id=${vm.listid}`).then(result=>{
                // console.log("detail=>",result);
                let re=result.playlist.tracks.map((v,index)=>{
                    v.song={
                        privilege:result.privileges[index],
                        artists:v.ar,
                        album:v.al
                    }
                    return v;
                })
                // console.log(re)
                vm.songList=re;
            });
            // 
            vm.axios.get(`/comment/playlist?id=${vm.listid}`).then(result=>{
                vm.comment=result.comments;
                // console.log("resco=>",result.comments);
                // console.log("vm.comments==>",vm.comment);
            });
        })
    },
    components:{
        MusicList,
        Comment,  //评论
        ListTitle,   //
       
    }
}
</script>